<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>326homework</title>
    <!--作业：表单一开始就是隐藏的点添加表单才会出现-->
    <style>
        td {
            border: 1px solid;
            border-radius: 3px;
        }

        #tbl {
            width: 45%;
            height: 30%;
            font-family: 华文楷体;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        #addbtn {
            margin: 5px;
        }

        #xmk {
            margin: 5px;
            border-radius: 10px;
            width: 200px;
            height: 30px;
        }

        #nianling {
            margin: 5px;
            border-radius: 10px;
            width: 200px;
            height: 30px;
        }

        #queren {
            margin: 10px;
        }

        #form-item {
            display: none;
        }
    </style>
</head>


<body>
<table id="tbl">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>段位</td>
        <td>编辑</td>
    </tr>
</table>
<button id="addbtn" onclick="show()">添加</button>
<form id="form-item">
    <div id="name">
        <prompt>姓名：</prompt>
        <input type="text" name="uname" id="xmk">
    </div>

    <div id="sex">
        <lable>性别：</lable>
        <input type="radio" name="sex" value="男" class="radio">男
        <input type="radio" name="sex" value="女" class="radio" checked>女
        <!--单选按钮，name必须相同-->
    </div>

    <div id="age">
        <prompt>年龄：</prompt>
        <input type="number" name="uage" id="nianling">
    </div>
    <div>
        <select name="duanwei">
            <option value="青铜">青铜</option>
            <option value="黄金">黄金</option>
            <option value="白银">白银</option>
            <option value="王者">王者</option>
        </select>
    </div>

    <div id="queren">
        <input type="button" value="确认" onclick="addtr()">
        <input type="button" value="确认修改">
    </div>
</form>

<script>
    var persons = [];
    var tbl = document.getElementById('tbl');

    function show() {
        var form = document.getElementById('form-item');
        form.style.display = 'block';//点击添加那个按钮，就会显示表单
    }
    function addtr() {
        var str = "";
        for (i in persons) { //与上两行有相同效果
            str += `<tr>
        <td>${persons[i].name}</td>
        <td>${persons[i].sex}</td>
        <td>${persons[i].age}</td>
        <td>${persons[i].duanWei}</td>
        <td><a href="javascript:del(${i})">删除</a></td>
        </tr>`;
        }
    }
    document.querySelector('#tbl').innerHTML = str;
    }

</script>
</body>
</html>